<template>
  <el-container class="el-container" style="min-height: 100vh; ">
    <el-header height="10%" style="background-color: rgba(0, 0, 0,0.0);">

      <div style="height: 100%;"></div>
    </el-header>
    <el-main height="80%">
      <!-- <el-layout> -->
      <el-row>

        <el-col :span="12">
          <div class="grid-content"></div>
        </el-col>

        <el-col :span="6" class="registerCol">
          <div class="grid-content bg-purple-light" @keyup.enter="handleRegister">
            <el-row class="registerTitle">
              <h1>注册</h1>
            </el-row>

            <!-- 普通输入框区域 -->

            <el-row class="form-item">
              <el-col :span="24">
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
                <el-input v-model="identifier" class="inp identifier" placeholder="请输入手机号/邮箱" type="text"
                  @blur="validateidentifier">
                </el-input>
                <span v-if="identifierError" class="error-message">{{ identifierError }}</span>
              </el-col>
            </el-row>

            <el-row class="form-item">
              <el-col :span="24">
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
                <el-input v-model="password" class="inp password" placeholder="请输入密码" :type="passwordType"
                  @blur="validatePassword">
                  <template #suffix>
                    <el-icon @click="togglePasswordType">
                      <View v-if="isPasswordVisible" />
                      <Hide v-else />
                    </el-icon>
                  </template>
                </el-input>
                <span v-if="passwordError" class="error-message">{{ passwordError }}</span>
              </el-col>
            </el-row>

            <el-row class="form-item">
              <el-col :span="24">
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
                <el-input v-model="passwordConfirm" class="inp confirmPassword" placeholder="请再次输入密码"
                  :type="confirmPasswordType" @blur="validatePasswordConfirm">
                  <template #suffix>
                    <el-icon @click="toggleConfirmPasswordType">
                      <View v-if="isConfirmPasswordVisible" />
                      <Hide v-else />
                    </el-icon>
                  </template>
                </el-input>
                <span v-if="passwordConfirmError" class="error-message">{{ passwordConfirmError }}</span>
              </el-col>
            </el-row>

            <button class="buttonRegister" @click="handleRegister">注册</button>
            <el-row>
              <router-link class="registerLink" to="/login">
                <el-icon size="11">
                  <CaretLeft />
                </el-icon>
                返回登录
              </router-link>
            </el-row>
          </div>
        </el-col>

      </el-row>
      <!-- </el-layout> -->
    </el-main>
    <el-footer height="10%" class="footer">
      <Footers />
    </el-footer>

  </el-container>
</template>

<style lang="less" scoped>
.el-container {
  background-image: url('@/assets/background5.png'); // 替换为你的图片路径
  background-size: cover; // 让背景图覆盖整个容器
  background-position: center; // 居中显示背景图
  background-repeat: no-repeat; // 不重复显示背景图
}

.footer {
  padding: 0;
  margin: 0;
}

.registerCol {
  margin-top: 7%;
  text-align: center;
  padding: 20px;
}

.registerCol .el-row {
  margin: 13px auto;
}

.bg-purple-light {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  box-shadow: 33px 4px 40px rgba(53, 53, 53, 0.702), 0 0 44px rgba(105, 68, 68, 0.04);
}

.form-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-items: center;
  width: 100%;
  // margin: 0px auto;
}

.registerTitle {
  font-size: 20px;
  border-bottom: 2px solid #549eb2;
  color: #202c35;
  text-shadow: 3px 4px 33px #549eb2;
  // padding-bottom: 5px;
  margin-bottom: 10px;
}



.inp {
  width: 70%;
  height: 100%;
  font-size: 14px;
  margin: 0px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;

  &:focus {
    outline: none;
    border: 1px solid #549eb2; // 修正了这里border的语法错误
    box-shadow: 0 0 4px rgba(84, 158, 198, 0.3);
  }
}

.error-message {
  color: #f56c6c;
  font-size: 11px;
  position: absolute;
  bottom: -16px;
  left: 8%;
  padding-left: 10%;
}


.buttonRegister {
  width: 60%;
  height: 100%;
  margin: 10px auto;
  padding: 8px 0px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  background-color: #549eb2;
  box-shadow: 0 2px 12px 0 rgba(84, 158, 198, 0.7);

  &:hover {
    background-color: #4a94bc;
    box-shadow: 0 -5px 16px rgba(84, 158, 198, 0.7);
  }
}




.registerLink {
  font-size: 14px;
  text-decoration: none;
  text-align: justify;
  color: #549eb2;

  &:hover {
    text-decoration: underline;
  }
}
</style>


<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { User, Message, Lock, CircleCheck } from '@element-plus/icons-vue';
import Footers from '@/components/footer/Footer.vue';
import { register } from '@/api/user';

import { computed } from 'vue';
// import { ShowPassword } from '@element-plus/icons-vue';

// 密码显示状态
const isPasswordVisible = ref(false);
const isConfirmPasswordVisible = ref(false);

// 动态计算输入框类型
const passwordType = computed(() => isPasswordVisible.value ? 'text' : 'password');
const confirmPasswordType = computed(() => isConfirmPasswordVisible.value ? 'text' : 'password');

// 切换密码显示状态
const togglePasswordType = () => {
  isPasswordVisible.value = !isPasswordVisible.value;
};

const toggleConfirmPasswordType = () => {
  isConfirmPasswordVisible.value = !isConfirmPasswordVisible.value;
};


const router = useRouter();


const identifier = ref('');
const password = ref('');
const passwordConfirm = ref('');

// 验证状态
const identifierError = ref('');
const passwordError = ref('');
const passwordConfirmError = ref('');

// 账户验证
const validateidentifier = () => {
  if (!identifier.value) {
    identifierError.value = '请输入账户手机号/邮箱';
  } else if (!/^1[3-9]\d{9}$/.test(identifier.value) && !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(identifier.value)) {
    identifierError.value = '请输入正确的手机号或邮箱';
  } else {
    identifierError.value = '';
  }
};

// 密码验证
const validatePassword = () => {
  if (!password.value) {
    passwordError.value = '请输入密码';
  } else if (password.value.length < 9 && /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(password.value) == false) {
    passwordError.value = '密码需8位以上(含大小写字母 数字 特殊字符)';
  } else {
    passwordError.value = '';
  }
};

// 确认密码验证
const validatePasswordConfirm = () => {
  if (!passwordConfirm.value) {
    passwordConfirmError.value = '请确认密码';
  } else if (passwordConfirm.value !== password.value) {
    passwordConfirmError.value = '两次输入的密码不一致';
  } else {
    passwordConfirmError.value = '';
  }
};

// 注册处理
const handleRegister = async () => {
  // 手动触发所有验证
  validateidentifier();
  validatePassword();
  validatePasswordConfirm();

  // 检查是否有错误
  if (!identifierError.value && !passwordError.value && !passwordConfirmError.value) {
    const registerData = {
      identifier: identifier.value,
      password: password.value,
      repassword: passwordConfirm.value
    }
    // 发送后端注册请求
    const res = await register(registerData)
    console.log(res);

    ElMessage({
      message: res.data.message,
      type: 'success',
      plain: true,
    })
    if (res.status === 200) {

      router.push('/login');
    }

    identifier.value = '';
    password.value = '';
    passwordConfirm.value = '';
  } else {
    // ElMessage.error('请检查您的输入');
    ElMessage({
      message: '请检查您的输入',
      type: 'error',
      plain: true,
    })
  }
};

// 实时监听输入并清除红色错误提示
watch([identifier, password, passwordConfirm], () => {
  identifierError.value = '';
  passwordError.value = '';
  passwordConfirmError.value = '';
});
</script>
